<!--
 * @Author: zi.yang
 * @Date: 2021-03-11 21:03:56
 * @LastEditors: zi.yang
 * @Description: In User Settings Edit
 * @FilePath: \vue-music\src\components\view\search-page.vue
-->
<template>
  <div class="search-page">
    <music-hitstory v-on:setKeyword="setKeyword"></music-hitstory>
    <music-hot v-on:hotRequest="hotRequest" v-on:setKeyword="setKeyword"></music-hot>
  </div>
</template>

<script lang="ts">
import { reactive } from '@vue/composition-api';
import musicHistoryVue from '../search/music-history.vue';
import musicHotVue from '../search/music-hot.vue';

// hotRequestFun 方法接口
interface IhotRequestFun{
  hotRequest:(this:any, requstState:boolean) => void
}

// setKeywordFun 方法接口
interface IsetKeywordFun{
  setKeyword:(this:any, keyword:string) => void
}

// setup 接口
interface Isetup extends IhotRequestFun, IsetKeywordFun{}

// 热门请求状态，加载热门数据完成后，关闭加载页面
function hotRequestFun():IhotRequestFun {
  // 声明 state 类型
  type data = {
    hotRequestState:boolean
  }
  /**
   * 注册 state 类型的三种方式：
   * 方式一： const state:data = reactive({});
   * 方法二： const state = reactive<data>({});
   * 方式三： const state = reactive({}) as data;
   */
  const state = reactive<data>({
    hotRequestState: false,
  });
  // 'this' implicitly has type 'any' because it does not have a type annotation.
  function hotRequest(this:any, requstState:boolean):void {
    state.hotRequestState = requstState;
    this.$emit('isSearchLoading', state.hotRequestState);
  }
  return {
    hotRequest,
  };
}

// 将搜索关键字返回给上级组件，同时用于将搜索关键字,加入历史记录
function setKeywordFun():IsetKeywordFun {
  // 'this' implicitly has type 'any' because it does not have a type annotation.
  function setKeyword(this:any, keyword:string):void {
    this.$emit('setKeyword', keyword);
  }
  return {
    setKeyword,
  };
}

export default {
  name: 'search-page',
  components: {
    'music-hitstory': musicHistoryVue,
    'music-hot': musicHotVue,
  },
  setup():Isetup {
    const { hotRequest } = hotRequestFun();
    const { setKeyword } = setKeywordFun();
    return {
      hotRequest,
      setKeyword,
    };
  },
};
</script>

<style scoped>
.search-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: 0 15px;

  font-size: '14px';
}
</style>
